<!--教学基础数据统计-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right87">
        <div class="item-name">学期：</div>
        <el-select v-model="dataForm.xueqi" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">系：</div>
        <el-select v-model="dataForm.dept" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in xi"  :key="item.label" :label="item.deptName" :value="item.deptName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" >
        <div class="item-name">教研室：</div>
        <el-select v-model="dataForm.staffRoom" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in jys" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-button color-primary width70" @click="getList">
        <img src="../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="dept" label="系" align="center" width="150"> </el-table-column>
        <el-table-column prop="staffRoom" label="教研室" align="center" width="150"></el-table-column>
        <el-table-column prop="courseno" label="课程编号" align="center" width="150"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" align="center" width="150"></el-table-column>
        <el-table-column prop="teachingClassName"  label="教学班名称" align="center" width="150"></el-table-column>
        <el-table-column prop="peoCount" label="班额" align="center" width="150"></el-table-column>
        <el-table-column prop="className" label="专业班" align="center"></el-table-column>
        <el-table-column prop="courseweekCount" label="周次" align="center"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="planclasshours" label="计划学时" align="center" width="150"></el-table-column>
        <el-table-column prop="classhours" label="已排学时" align="center" width="150"></el-table-column>
        <el-table-column prop="trainingLevel" label="培养层次" align="center" width="150"></el-table-column>
        <el-table-column prop="xxtype" label="修习类型" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtask1" label="课程负责人 （主讲1）" align="center" width="200"></el-table-column>
        <el-table-column prop="teachtaskLevel1" label="主讲1职称" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtaskWeeks1" label="主讲1周次" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtaskHours1" label="主讲1承担学时" align="center" width="200"></el-table-column>
        <el-table-column prop="teachtask2" label="主讲2" align="center"></el-table-column>
        <el-table-column prop="teachtaskLevel2" label="主讲2职称" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtaskWeeks2" label="主讲2周次" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtask2" label="主讲2 承担学时" align="center" width="200"></el-table-column>
        <el-table-column prop="teachtask3" label="主讲3" align="center"></el-table-column>
        <el-table-column prop="teachtaskLevel3" label="主讲3职称" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtaskWeeks3" label="主讲3周次" align="center" width="150"></el-table-column>
        <el-table-column prop="teachtaskHours3" label="主讲3 承担学时" align="center" width="200"></el-table-column>
      </el-table>
      <div class="export-button" @click="importExcel" style="width:150px">
        <img src="../../assets/assessment/icon-export.png" alt="" />
        <span>全部导出Excel</span>
      </div>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?0:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {basicTJList} from "@/api/lineData";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
     //查询条件
      searchList:[
        {label:'按教员-课程维度筛选',value:1},
        {label:'按课程-教员维度筛选',value:2},
        {label:'按专业-课程维度筛选',value:3},
        {label:'按专业-课程-教员维度筛选',value:4},
      ],
      xq:[],//学期
      xi:[],//系
      jys:[],//教研室
      dataForm:{
        staffRoom:'全部',//教研室
        xueqi:'',//学期
        dept:'全部',//系
        courseName:'',
        teacherName:'',
        isLeader:'',
        major:'',
        isCommon:'',
        pageSize:50,
        pageNo:1,
      },
      tableData: [],
      total:0
    };
  },
  mounted(){
    let mes = this.$route.query.mes
    this.dataForm = {
      ...this.dataForm,
      courseName:mes.courseName,
      teacherName:mes.teacherName,
      isLeader:mes.isLeader,
      major:mes.major,
      isCommon:mes.isCommon,
    }
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.dataForm.xueqi = mes.data.isAdmin !==1?mes.data.id:'';
        this.xueqiID = mes.data.isAdmin !==1?mes.data.id:''
      })
    })
    //系列表
    this.commonApi.getXIOption().then(res=>{
      this.xi = [{deptName:'全部'},...res.data]
    })
    //获取教研室
    this.commonApi.getJYSOption().then(res=>{
      this.jys = [{deptName:'全部'},...res.data]
    })
    this.getList()
  },
  methods: {
      //当前页
      currentPage(e){
        this.dataForm.pageNo = e;
        this.getList()
      },
      async getList(){
        let params = {
          ...this.dataForm,
          dept:this.dataForm.dept=='全部'?'':this.dataForm.dept,
          staffRoom:this.dataForm.staffRoom=='全部'?'':this.dataForm.staffRoom
        }
        let res = await basicTJList(params)
        this.tableData = res.data.records
        this.total =  res.data.total
      },
      //导出
      importExcel(){
        Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/teachBasicDataStatics/exportData',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '教学基础统计数据.xlsx');
        }); 
      },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
  align-items: center;
}
.width70{width: 70px;}
.right87{
    margin-right: 20px;
}
.total-notice{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004CA7;
    margin-top:10px
}
</style>
